<template>
	<view class="add-address">
		<view class="add-address-msg">
			<view class="user-name">
				<view>
					收件人
				</view>
				<view :style="{display:delBtnShow?'flex':'block'}">
					<input type="text" placeholder="请输入收件人姓名" v-model="userName" />
					<image @click="userName = ''" class="del-text" :src="clearPng" v-if="delBtnShow&&userName!=''"></image>
				</view>
			</view>
			<view class="user-name">
				<view>
					联系号码
				</view>
				<view :style="{display:delBtnShow?'flex':'block'}">
					<input :maxlength="11" v-model="userPhone" type="number" placeholder="请输入联系人号码"/>
					<image @click="userPhone = ''" class="del-text" :src="clearPng" v-if="delBtnShow&&userPhone!=''"></image>
				</view>
			</view>
			<view class="user-name" style="display: flex;justify-content: space-between;">
				<view>
					所在地区
				</view>
				<view style="display: flex;">
					<input type="text" v-model="pickerText" placeholder="请选择省、市、区（县)" @click="chooseCity"/>
					<image :src="arrow_right" mode="" style="width: 12upx;height: 20upx;margin-top: 16upx;margin-left: 20upx;"></image>
					<image @click="pickerText = ''" class="del-text" :src="clearPng" v-if="delBtnShow&&pickerText!=''"></image>
				</view>
			</view>
			<view class="detail-address">
				<view>
					详细地址
				</view>
				<view :style="{display:delBtnShow?'flex':'block'}">
					<textarea v-model="userDetailAddr" placeholder="请输入详细地址需要写到哪栋楼哪个楼层或房间号" />
					<image  @click="userDetailAddr=''" style="position: absolute;bottom: 24upx;right: 24upx;width: 30upx;height: 30upx;z-index: 9999;" :src="clearPng" mode="" v-if="delBtnShow&&userDetailAddr!=''"></image>
				</view>
			</view>
		</view>
		<view class="is-default">
			<view style="margin-top: 8upx;">
				设为默认地址
			</view>
			<view>
				<switch :checked="isDefault" @change="swithChange" color="#00A66A"/>
			</view>
		</view>
		<view class="sure-add" @click="addAddr">
			确认
		</view>
		<!-- 是编辑的时候进来的就显示这个按钮 -->
		<view class="del-add" v-if="delBtnShow" @click="delAdress">
			删除地址
		</view>
		<uni-popup ref="popupDelete" :custom="true">
			<view class="popup_box_de">
				<view class="popup_top_de">
					<view class="popup_title_de">确定要删除该地址吗？</view>
				</view>
				<!-- 用户操作按钮 -->
				<view class="checkDeBtns">
					<view class="cancleDeBtn" @click="closeDelete">取消</view>
					<view class="sureDeBtn" @click="sureDelete">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 地址选择 -->
		<view class="mpvue-picker">
			<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
			 @onConfirm="onConfirm" :pickerValueArray="pickerValueArray"></mpvue-picker>
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			 @onConfirm="onConfirm"></mpvue-city-picker>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	export default{
		components:{mpvuePicker,mpvueCityPicker,uniPopup},
		data(){
			return{
				clearPng: this.$imgUrl + 'img/clear.png',
				arrow_right: this.$imgUrl + 'img/arrow_right.png',
				token: this.$store.getters.getToken,
				cityIndex: 0,
				cityArray:['1','2'],
				showCity: false,
				themeColor: '#007AFF',
				
				mode: '',
				deepLength: 3,
				cityPickerValueDefault: [0, 0, 1],
				pickerValueDefault: [0],
				pickerValueArray:[],
				isDefault: false,
				delBtnShow: false,
				userName: '',
				userPhone:'',
				userDetailAddr:'',
				pickerText: '',
				forbidden: false,
				option: '',
				id: '',
				userId:this.$store.getters.getUserId
			}
		},
		onLoad(option) {
			console.log('option11111',option)
			this.option = option
			if(option.page == 'edit'){
				let item = JSON.parse(option.item)
				console.log(item,'item')
				this.userName = item.name
				this.userPhone = item.mobile
				this.id = item.id
				this.userId = item.userID
				var allAddress=item.address;
				var lenght=allAddress.length;
				var index=allAddress.lastIndexOf("区");
				this.pickerText=allAddress.substring(0,index+1);
				this.userDetailAddr=allAddress.substring(index+1,lenght);
				if(item.isDefault == '0'){
					this.isDefault = false
				}else{
					this.isDefault = true
				}
				this.delBtnShow = true
			}else{
				this.delBtnShow = false
			}
		},
		methods:{
			//验证
			verification() {
				let flag = true
				let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
					regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
				if (this.userName == "") {
					uni.showToast({
						title: "收货人不能为空",
						duration: 2000,
						mask: true,
						icon: "none"
					})
					return flag = false
				}
				if (regEn.test(this.userName) || regCn.test(this.userName)) {
					uni.showToast({
						title: "收货人不能包含特殊字符",
						duration: 2000,
						mask: true,
						icon: "none"
					})
					return flag = false
				}
				if (!(/^1[34578]\d{9}$/.test(this.userPhone))) {
					this.forbidden = false
					uni.showToast({
						title: '手机号码有误，请重填',
						duration: 2000,
						icon: "none",
						position: "top",
						mask: true
					});
					return flag = false
				}
				if (this.userDetailAddr == "") {
					uni.showToast({
						title: "详细地址不能为空",
						duration: 2000,
						mask: true,
						icon: "none"
					})
					return flag = false
				}
				if (regEn.test(this.userDetailAddr) || regCn.test(this.userDetailAddr)) {
					uni.showToast({
						title: "详细地址不能包含特殊字符",
						duration: 2000,
						mask: true,
						icon: "none"
					})
					return flag = false
				}
				if (this.pickerText == "") {
					uni.showToast({
						title: "所在地区不能为空",
						duration: 2000,
						mask: true,
						icon: "none"
					})
					return flag = false
				}
				return flag
			},
			// 打开删除弹框
			delAdress(){
				this.$refs.popupDelete.open()
			},
			// 关闭删除弹框
			closeDelete() {
				this.$refs.popupDelete.close()
				this.deleteOneId = 0
			},
			// 确定删除地址
			sureDelete(){
				let data = {
					token:this.token,
					id:this.id
				}
				this.$api.delAddr(data).then(res => {
					console.log(res)
					if(res.status){
						uni.showToast({
							title:'删除成功',
							icon:'none',
							duration:2000
						})
						this.closeDelete()
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			// 添加地址
			addAddr(){
				var that = this;
				let address = that.pickerText + that.userDetailAddr;
				if (that.verification()) {
					let is_sure 
					if(this.isDefault){
						is_sure = 1
					}else{
						is_sure = 0
					}
					let data
					if(that.option.page == 'edit'){
						data = {
							token:that.token,
							name:that.userName,
							mobile:that.userPhone,
							address: address,
							isDefault:is_sure,
							userID:this.userId,
							id:this.id
						}
					}else{
						data ={
							token:that.token,
							name:that.userName,
							mobile:that.userPhone,
							address: address,
							isDefault:is_sure,
							userID:this.userId,
						}
					}
					if(that.option.page == 'edit'){
						this.$api.editAddr(data).then(res => {
							if(res.status){
								uni.showToast({
									title:'修改成功',
									icon:'none',
									duration:2000
								})
								setTimeout(() => {
									uni.navigateBack({
										delta:1
									})
								},1000)
							}else{
								uni.showToast({
									title:res.msg,
									icon:"none",
									duration:2000
								})
							}
						}).catch(err => {
							console.log(err)
						})
					}else{
						that.$api.addrManage(data).then(res => {
							console.log(res)
							if(res.status){
								uni.showToast({
									title:'添加成功',
									icon:'none',
									duration:2000
								})
								setTimeout(() => {
									uni.navigateBack({
										delta:1
									})
								},1000)
							}else{
								uni.showToast({
									title:res.msg,
									icon:"none",
									duration:2000
								})
							}
						}).catch(err => {
							console.log(err)
						})
					}
					
				}
			},
			swithChange(e){
				console.log(e)
				this.isDefault = e.detail.value
			},
			chooseCity(){
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				let pickerTextArr = e.label.split('-')
				this.pickerText = pickerTextArr[0] + pickerTextArr[1] + pickerTextArr[2]
				console.log(this.pickerText)
			},
		}
	}
</script>

<style>
	page{
		background: #F5F6F9;
	}
	.add-address{
		width: 100%;
		height: 100%;
		border-top: 1upx solid #DEDEDE;
	}
	.add-address-msg{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.user-name{
		width: 100%;
		border-bottom: 1upx solid #E6E6E6;
		display: flex;
		justify-content: space-between;
		padding: 32upx 0 36upx 0;
		box-sizing: border-box;
		color: #333333;
		font-size: 30upx;
	}
	input{
		text-align: right;
		vertical-align: middle;
	}
	.del-text{
		width: 30upx;
		height: 30upx;
		margin-top: 6upx;
		margin-left: 30upx;
	}
	.popup_box_de {
		width: 640upx;
		height: 336upx;
		border-radius: 24upx;
		background-color: #fff;
		font-weight: 550;
		font-size: 34upx;
	}
	.popup_top_de {
		width: 100%;
		height: 224upx;
		box-sizing: border-box;
		padding: 88upx 150upx;
		border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
	}
	
	.popup_title_de {
		color: #353535;
		text-align: center;
	}
	.checkDeBtns {
		height: 112upx;
		display: flex;
		color: #666;
	}
	
	.sureDeBtn {
		width: 50%;
		height: 100%;
		color: #00A66A;
		text-align: center;
		line-height: 112upx;
	}
	
	.cancleDeBtn {
		width: 50%;
		height: 100%;
		text-align: center;
		line-height: 112upx;
		border-right: 1upx solid rgba(0, 0, 0, 0.1);
	}
	.detail-address{
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
		color: #333333;
		font-size: 30upx;
	}
	.detail-address>view:last-child{
		position: relative;
	}
	textarea{
		width: 100%;
		height: 220upx;
		border: 2upx solid #DEDEDE;
		padding: 20upx;
		box-sizing: border-box;
		margin-top: 36upx;
	}
	.is-default{
		width: 100%;
		height: 110upx;
		padding: 30upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		margin-top: 20upx;
		color: #333333;
		font-size: 30upx;
	}
	.sure-add{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		color: #FFFFFF;
		font-size: 32upx;
		text-align: center;
		background: linear-gradient(#CBEC00,#00A66A);
		box-shadow: 0 8upx 16upx 0 rgba(0,166,106,0.4);
		border-radius: 44upx;
		margin: 0 auto;
		margin-top: 200upx;
	}
	.del-add{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		color: #666666;
		text-align: center;
		font-size: 30upx;
		background: #FFFFFF;
		border-radius: 40upx;
		margin: 44upx auto;
	}
</style>
